import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import './test.js' as Test

Window {
    width: 1200
    height: 1000
    visible: true
    title: qsTr("Hello World")

    //不可见的元素
    Column {
        spacing: 20
        //可视控件
        Button {
            id: btn
            text: "btn"

            //信号
            onTextChanged: {
                console.log('onTextChanged')
            }

            //槽函数
            //onClicked: console.log('clicked')
            //onClicked: showResult(add(1, 2))
            onClicked: {
                showResult(add(1, 2))
                console.log('onClicked')
                btn.text = "btn clicked"

                //使用导入的js文件Test
                let oper = new Test.OperateNum(888)
                showResult(oper.add(111))
                showResult(oper.sub(111))
            }
            //方法
            function add(num1, num2) {
                return num1 + num2
            }

            function showResult(result) {
                console.log(result)
            }
        }

        Label {
            text: btn.text
            color: 'red'
            font.pointSize: 28
        }

        Slider {
            from: 1
            value: 25
            to: 100
        }

        Rectangle {
            id: rect1
            width: 200
            height: 200
            color: 'orange'
            //根据z值判断谁在上谁在下
            Button {
                id: btn2
                text: "hello2"
                z: 3
                onClicked: {
                    let rgb = Test.getRandomColor()
                    console.log(JSON.stringify(rgb))
                    rect2.color = Qt.rgba(rgb.red/255, rgb.green/255, rgb.blue/255, 1.0)
                }
            }
            Button {
                id: btn3
                text: "hello3"
                x: 40
                y: 20
                z: 2
                onClicked: rect2.color = 'red'
            }
        }

        Rectangle {
            id: rect2
            width: 500
            height: 500
            color: 'green'

            Button {
                id: btn4
                text: "drag"
                MouseArea {
                    //锚点布局
                    anchors.fill: parent
                    drag.target: btn4
                }
            }
            Rectangle {
                id: rect3
                //和按钮位置绑定
                x: btn4.x + btn4.width
                y: btn4.y + btn4.height
                width: 100
                height: 100
                color: 'red'
            }
        }
    }
}
